<template>
  <div>
    <div class="login-container">
      <h2 class="align-cm">登录</h2>
      <van-tabs v-model="登录方式">
        <van-tab title="用户名登录" name="用户名登录" />
        <van-tab title="手机号码登录" name="手机号码登录" />
      </van-tabs>
      <van-cell>
        <van-cell-group>
          <template v-if="登录方式 == '用户名登录'">
            <van-field
              label="账号"
              placeholder="账号"
              input-align="left"
              v-model="登录账号"
            ></van-field>
            <van-field
              label="密码"
              placeholder="密码"
              input-align="left"
              v-model="登录密码"
            ></van-field>
          </template>
          <template v-else>
            <van-field
              label="手机号码"
              placeholder="手机号码"
              input-align="left"
              v-model="手机号码"
            ></van-field>
          </template>

          <van-field
            label="验证码"
            placeholder="验证码"
            input-align="left"
            v-model="图形验证码"
          >
            <img
              slot="button"
              :src="图形验证码Src"
              @click="获取图形验证码()"
              alt="验证码"
            />
          </van-field>
        </van-cell-group>
      </van-cell>

      <van-button block @click="用户登录()">登录</van-button>
    </div>

    <van-cell-group class="mt20">
      <van-row>
        <van-col span="8">这行仅开发使用</van-col>
        <van-col span="8">
          <router-link to="/order">跳转角色页面</router-link>
        </van-col>
        <van-col span="8"></van-col>
      </van-row>
    </van-cell-group>
  </div>
</template>
<script>
import storage from '@/assets/storage.js';
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'login',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      登录方式: '手机号码登录',
      手机号码: '',
      登录账号: '',
      登录密码: '',
      客户端唯一标识码: '',
      图形验证码: '',
      图形验证码Src: '',
      userName: 'string', //登录的加密账号
      userPwd: 'string', //登录的加密的密码
      userVerifyKey: 'string', //客户端唯一标识码
      verifyCode: 'string', //图形验证码
    };
  },
  computed: {
    ...mapState([]),
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    getLastFourDigitsOfPhoneNumber: function(phoneNumber) {
      // 定义一个正则表达式来匹配手机号码的最后 六 位数字
      const regex = /\d{6}$/;
      // 使用正则表达式执行匹配操作
      const match = phoneNumber.match(regex);
      // 如果匹配成功，返回匹配结果，否则返回null或空字符串
      return match ? match[0] : null;
    },
    computed登录参数: function() {
      let d = {
        userName: 'string', //登录的加密账号
        userPwd: 'string', //登录的加密的密码
        userVerifyKey: this.客户端唯一识别码, //客户端唯一标识码
        verifyCode: this.图形验证码, //图形验证码
      };
      if (this.登录方式 == '用户名登录') {
        d.userName = this.登录账号;
        d.userPwd = this.登录密码;
      } else {
        d.userName = this.手机号码;
        d.userPwd = this.getLastFourDigitsOfPhoneNumber(this.手机号码);
      }

      return _.mapValues(d, (v, k) => {
        if (['userVerifyKey', 'verifyCode'].includes(k)) return v;
        return this.$encryption.encrypt(v);
      });
    },
    用户登录: function() {
      let p = {};
      let d = this.computed登录参数();
      this.$api.用户模块
        .用户登录(p, d)
        .then((res) => {
          console.log(
            '%c [ res ]-128',
            'font-size:13px; background:pink; color:#bf2c9f;',
            res
          );
          // 跳转到登录页面或其他页面
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    获取图形验证码: function() {
      let p = {
        userVerifyKey: this.客户端唯一识别码,
      };
      this.$api.用户模块
        .获取图形验证码(p)
        .then((res) => {
          // 将 ArrayBuffer 转换为 Blob 对象
          const blob = new Blob([res], { type: 'image/png' });
          // 为 Blob 对象创建一个临时 URL
          this.图形验证码Src = URL.createObjectURL(blob);
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
    缓存token并跳转: function(token, url) {},
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    let urlArgs = this.$getUrlArgs();
    this.fromUserId = this._.get(urlArgs, 'fromUserId', null);
    this.客户端唯一识别码 = this.$getClientUniqueId(); //设置“客户端唯一识别码”
    // 初始化图形验证码
    this.获取图形验证码();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped></style>
